<template>
    <!-- 弹窗显示题目、答题选项等富文本 -->
    <el-dialog 
    title="设置内容"
    v-model="global.visible"
    destroy-on-close
    align-center
    :width="1000"
    >
        <div class="w-full content">
            <div class="editor w-full overflow-y-auto">
                <Editor 
                v-model="global.content"
                @change="onChangeEditor"
                />
            </div>
            <div class="flex items-center justify-end mt-1 relative">
                <el-button @click="cancle">取消</el-button>
                <el-button @click="save" type="primary">保存</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script lang="ts" setup>
import Editor from '@/Components/Editor.vue';
import type { TopicHtmlType } from '@/Utils/type';
import { nextTick, reactive } from 'vue';
import { ElMessageBox } from 'element-plus';

// const props = defineProps<{
//     modelValue?: string;
// }>();

const emit = defineEmits(['update:modelValue', 'change', 'close']);

const global = reactive({
    visible: false,
    content: '<p></p>', // html文本内容
    contentBak: '<p></p>',
    type: <TopicHtmlType>'subejct',
    resolve: <any>null
});

// 点击取消
const cancle = async () => {
    try {
        await ElMessageBox.confirm(
            '确定取消?',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );
        // global.content = global.contentBak;
        onChange();
        global.visible = false;
    } catch (error) {
        
    }
};

// 点击保存
const save = async () => {
    // onChange();
    // console.log('global.content: ', global.content);
    emit('close', global.content);
    global.content = '<p></p>';
    setTimeout(() => {
        global.visible = false;
    }, 10);
};

// 输入框内容更新事件
const onChangeEditor = () => {
    // console.log('onChangeEditor');
    onChange();
};

// 输入框隐藏之前
const beforeClose = () => {
    global.visible = false;
};

const onChange = () => {
    emit('update:modelValue', global.content);
    emit('change', global.content);
};

defineExpose({
    show: async (
        { html = '' }
        :
        { html?: string }
    ) => {
        // console.log('html: ', html);
        // html = `<p>一个盒子里有5个红球、1个绿球和2个黄球,每次任意摸出1个球后再放回盒中,这样摸 600 次,摸到绿球的次数约占总次数的_____%,大约一共能摸到_____次黄球。<img src="https://loongteach.oss-cn-guangzhou.aliyuncs.com/shuxue/20240329/5f13de4fc8d14d1c8cceee190f074481.png" alt="企业微信截图_20240312220035.png" data-href="https://loongteach.oss-cn-guangzhou.aliyuncs.com/shuxue/20240329/5f13de4fc8d14d1c8cceee190f074481.png" style=""/></p>`;
        global.visible = true;
        global.content = '<p></p>';
        await nextTick();
        global.content = html || '<p></p>';
        global.contentBak = global.content || '<p></p>';
        // return new Promise(resolve => {
        //     global.resolve = resolve;
        // });
    }
});
</script>

<style lang="scss" scoped>
.content {
    .editor {
        height: 500px;
    }
}
</style>